<!--
 * @Author: LiuYan
 * @Date: 2022-12-17 13:38:50
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-09 15:25:00
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <title>Document</title>
    <style>
      .body {
        padding: 0 !important;
        overflow: hidden;
      }

      .body .table-body {
        height: 352px !important;
        overflow-y: auto;
      }

      .ghcj2 .tab_button .input-group label {
        width: 32px;
        height: 32px;
        background: #3e7bfa;
        border-radius: 0px 6px 6px 0px;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>

  <body>
    <div class="ghcj2" id="app">
      <div class="body">
        <div class="tab-group">
          <div class="tab_button">
            <button class="button_primary_plain" @click="onTaskSplit">
              任务拆解
            </button>
            <button class="button_primary_plain" @click="onSpeedProgress">
              进度跟进
            </button>
            <button class="button_primary">团队日报</button>
          </div>
          <div class="input-btn">
            <div class="input-group">
              &ensp;
              <input
                style="width: 16vw"
                placeholder="请输入姓名/联系方式/关键词"
              />
              <label> <img src="./common/img/ghcj2/sosou.png" /> </label>
            </div>
            <button class="button_warning" id="addDayReport">
              <img src="./common/img/ghcj2/bianji.png" />填写日报
            </button>
          </div>
        </div>
        <div class="table">
          <div class="table-header">
            <div class="tr">
              <div class="td center" style="width: 10%">日期</div>
              <div class="td center" style="width: 10%">姓名</div>
              <div class="td center" style="width: 10%">部门</div>
              <div class="td center" style="width: 10%">状态</div>
              <div class="td center" style="width: 10%">待解决的问题</div>
              <div class="td center" style="width: 10%">操作</div>
            </div>
          </div>
          <div class="table-body">
            <div class="tr" v-for="item in list">
              <div class="td center" style="width: 10%">{{item.value}}</div>
              <div class="td center" style="width: 10%">{{item.value}}</div>
              <div class="td center" style="width: 10%">{{item.value}}</div>
              <div class="td center" style="width: 10%">{{item.value}}</div>
              <div class="td center" style="width: 10%">{{item.value}}</div>
              <div class="td center" style="width: 10%">
                <button class="button_primary_text" @click="handle(item)">
                  查看
                </button>
                &ensp;
                <button class="button_error_text">删除</button>
              </div>
            </div>
          </div>
          <div class="pagination">
            <span>共 {{total}} 条</span>
            <ul>
              <li @click="shang"><i class="bi bi-chevron-left"></i></li>
              <li
                v-show="start > 0"
                @click="()=>{
                  if(start > 0){
                    params.page = start;
                    end-=3
                    start-=3
                  }
                }"
              >
                ...
              </li>
              <li
                @click="onCurrentPage(item)"
                v-for="item in totalPage"
                v-show="item < end && item > start"
                :class="[item == params.page ? 'active' :'']"
              >
                {{item}}
              </li>
              <li
                v-show="end <= totalPage"
                @click="()=>{
                  if(end <= totalPage){
                  params.page = end;
                  end+=3
                  start+=3
                  }
                }"
              >
                ...
              </li>
              <li @click="next"><i class="bi bi-chevron-right"></i></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 填写日报 -->
      <div id="addDayReportBox" style="height: 80vh">
        <!-- <iframe
          src="./填写日报.html"
          width="100%"
          height="100%"
          frameborder="0"
        ></iframe> -->
        2
      </div>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    import DiaLog from "./common/js/diaLog.js";
    import { childMessage } from "./common/js/event.js";
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          total: 0,
          totalPage: 0,
          start: 0,
          end: 4,
          list: [],
          params: {
            page: 1,
            limit: 10,
          },
        };
      },
      //页面初始化加载
      mounted() {
        console.log("页面初始化加载");
        this.get();
      },
      //所有函数都写在这里
      methods: {
        // 任务拆解
        onTaskSplit() {
          childMessage({
            src: "./项目详情（进度-任务拆解）.html",
            type: "page",
          });
        },
        // 进度跟进
        onSpeedProgress() {
          childMessage({
            src: "./项目详情（进度-进度跟进）.html",
            type: "page",
          });
        },
        shang() {
          if (this.params.page > 1) this.params.page--;
          if (this.params.page < this.start + 1) {
            this.end -= 3;
            this.start -= 3;
          }
          this.get();
        },
        next() {
          if (this.params.page < this.totalPage) this.params.page++;
          if (this.params.page > this.end - 1) {
            this.end += 3;
            this.start += 3;
          }
          this.get();
        },
        onCurrentPage(page) {
          this.params.page = page;
        },
        //接口
        get() {
          // ajax 请求
          // $.ajax()
          this.totalPage = 10; // 总页数
          this.total = 100; //总条数
          this.list = [
            {
              value: "吴恒",
            },
          ];
        },
      },
    }).mount("#app");
    let dialog = new DiaLog({
      title: "填写日报",
      width: "80% ",
      el: "#addDayReportBox",
      cancelText: "存为草稿",
      confirmText: "提交日报",
      zIndex: 100,
      cancel: () => {
        console.log("存为草稿");
        dialog.hide();
      },
      confirm: (document) => {
        console.log("提交日报");
        dialog.hide();
      },
    });
    addDayReport.addEventListener("click", () => {
      dialog.show();
    });
  </script>
</html>
